<template>
	<div class="frame-body">
		<div class="container">
			<div class="left-menu">
				<div class="left-menu-stage">
					<div class="left-menu-scene">
						<div class="menu-title">
							<span>项目管理</span>
						</div>
						<div class="menu-list">
							<a-menu style="width: 208px;background-color:#efefef;" :default-selected-keys="['1']" :open-keys.sync="openKeys"
							 mode="inline" @click="handleClick()">
								<a-menu-item key="sub1" @titleClick="titleClick">
									<div class="nav-title">概况</div>
								</a-menu-item>

								<a-menu-item key="sub2" @titleClick="titleClick">
									<div class="nav-title">回收站</div>
								</a-menu-item>

								<a-menu-item key="sub3" @titleClick="titleClick">
									<div class="nav-title">待处理事件</div>
								</a-menu-item>

								<a-menu-item key="sub4" @titleClick="titleClick">
									<div class="nav-title">事件历史记录</div>
								</a-menu-item>
							</a-menu>
						</div>
					</div>
				</div>
			</div>
			<div class="right-container">
				<div class="right-container-stage" v-show="isView==false">
					<div id="sub-app">
						<a-alert style="margin:8px 16px;text-align:left;" message="提示用的文字区域" type="info" close-text="x" />
						<div class="page-body">
							<a-tabs default-active-key="1" @change="callback" size="small">
								<a-tab-pane key="1" tab="概览">
									<div class="overview">
										<div class="dashboard-main">
											<div class="todo-center-card" style="display:flex;">
												<a-card :loading="demoLoading">
													<div class="card-content">
														<div class="todoCenterCard">

														</div>
													</div>
												</a-card>
											</div>
											<a-card title="我的项目">
												<div class="btn_grp" slot="extra">
													<a-dropdown>
														<a-menu slot="overlay" @click="handleMenuClick">
															<a-menu-item key="1">
																1st item
															</a-menu-item>
															<a-menu-item key="2">
																2nd item
															</a-menu-item>
															<a-menu-item key="3">
																3rd item
															</a-menu-item>
														</a-menu>
														<a-button type="link"> 更多操作
															<a-icon type="down" />
														</a-button>
													</a-dropdown>
													<a-button shape="circle" type="link" icon="loading-3-quarters" />
												</div>
												<screen :screenList="screenList" />
												<div class="card-content">
													<div class="my-project-head">
														<div style="width:70%">
															<a-input-search></a-input-search>
														</div>
														<div style="white-space: nowrap; margin-left: 16px;">
															<a-button type="primary" @click="showDrawer()">
																创建项目
															</a-button>
														</div>
													</div>
													<a-skeleton :loading="loading">
													<div class="ingi-list-table">
														<div class="list-table-header">
														    <div class="th name" v-for="(item,index) in columns" :key="index"><div class="title">{{item.title}}</div></div>
														</div>
														<div class="list-table-body">
														    <a-collapse v-model="activeKey" :bordered="false" :accordion="true">
														        <template v-for="(item,index) in data">
														            <a-collapse-panel :key="item.id" :showArrow="false">
														                <div slot="header" class="list-table-body-row">
														                    <div class="td name" v-for="(item2,index2) in columns" v-if="item2.key!='action'">
																				<div class="title">{{item[item2.key]}}</div>
																			</div>
														                  <!--  <div class="td period">
														                        {{item.cycle}}
														                    </div> -->
														                    <div class="td actions">
														                        <a-button-group size="small">
														                            <a-button type="link">
														                                查看
														                            </a-button>
														                            <a-button type="link">
														                                编辑
														                            </a-button>
														                        </a-button-group>
														                    </div>
														                </div>
														               <!-- <a-card title="Default size card" style="width: 300px">
														                    <a slot="extra" href="#">more</a>
														                    <p>card content</p>
														                    <p>card content</p>
														                    <p>card content</p>
														                </a-card> -->
														            </a-collapse-panel>
														        </template>
														    </a-collapse>
														</div>
														<div class="list-table-footer"></div>
													</div>
													</a-skeleton>

													<a-pagination v-model="current" :total="total" show-less-items />
													<!-- <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
													 :data-source="data">
														<span slot="action" slot-scope="text, record">
															<a-button size="small" style="margin-right: 10px;" type="primary">
																审核
															</a-button>
															<a-button size="small" style="margin-right: 10px;" type="danger">
																删除
															</a-button>
															<a-button @click="isView=true" size="small" style="margin-right: 10px;" type="default">
																查看
															</a-button>
														</span>
													</a-table> -->
												</div>
											</a-card>

										</div>
										<aside class="dashboard-side">
											<a-card title="快速操作"></a-card>
											<a-card title="申请与审批"></a-card>
											<a-card title="资源库"></a-card>
											<a-card title="技术支援"></a-card>
										</aside>
									</div>
								</a-tab-pane>
								<a-tab-pane key="2" tab="资源查看">
									资源查看
								</a-tab-pane>
							</a-tabs>
						</div>
					</div>
				</div>
				<div class="right-container-stage" v-show="isView">
					这里是详情
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'
	import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
	import moment from 'moment';
	import {
		projectList,
		getSupervisor,
		getAdministration,
		createProject,
		getProjectByRole
	} from '@/api/list.js'
	import screen from '../../../components/screen'

	function getBase64(file) {
		return new Promise((resolve, reject) => {
			const reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = () => resolve(reader.result);
			reader.onerror = error => reject(error);
		});
	};
	const columns = [{
			title: '序号',
			key: 'id',
		},
		{
			title: '服务对象姓名',
			key: 'userName',
		},
		{
			title: '编号',
			key: 'bianhao',
		},
		{
			title: '所属群体',
			key: 'qunti',
		},
		{
			title: '问题性质',
			key: 'xingzhi',
		},
		{
			title: '服务形式',
			key: 'xingshi',
		},
		{
			title: '服务状态',
			key: 'zhuangtai',
		},
		{
			title: '开始时间',
			key: 'startTime',
		},
		{
			title: '最近记录时间',
			key: 'updateTime',
		},
		{
			title: '所属项目',
			key: 'case',
		},
		{
			title: '工作员',
			key: 'workPeople',
		},
		{
			title: '操作',
			key: 'action',
		},
	];

	const data = [];
	for (let i = 0; i < 10; i++) {
		data.push({
			id: i,
			userName: `张三 ${i}`,
			bianhao: `编号 ${i}`,
			qunti: `一般居民`,
			xingzhi: `家暴`,
			xingshi: `个案`,
			zhuangtai: `进行中`,
			startTime: `2020年5月1日 `,
			updateTime: '2021年4月25日',
			case: `项目 ${i}`,
			workPeople: `王五 ${i}`,
		});
	}
	export default {
		components: {
			screen
		},
		data() {
			return {
				screenList: [
                        {title:'档案状态',
						value:0,
						list:[{name:'全部',value:0},
							{name:'开案中',value:1},
							{name:'介入中',value:2},
							{name:'分析及计划中',value:3},
						]},
                        {title:'审核状态',
						value:0,
                        list:[{name:'全部',value:0},
                        	{name:'待审核',value:1},
                        	{name:'审核通过',value:2},
                        	{name:'被驳回',value:3},
                        ]},
                    ],
				demoLoading: true,
				current: 1,
				openKeys: ['sub1'],
				data,
				columns,
				isView: false,
				visible: false,
				start: '',
				selectedRowKeys: [], // Check here to configure the default column
				loading: false,
				activeKey: [],
				listQurey: {
					page: 1,
					size: 10
				},
				total: 0,
				stepCurrent: 0,
				previewVisible: false,
				previewImage: '',
				supervisor: [],
				administration: [],
				project: {

				},
				locale,
				dateRange: ''

			};
		},
		watch: {
			openKeys(val) {
				console.log('openKeys', val);
			},
		},
		computed: {
			hasSelected() {
				return this.selectedRowKeys.length > 0;
			},
		},
		created() {
			// 测试获取用户
			// console.log("test");
			// const user =JSON.parse(localStorage.getItem('user'));
			// console.log(user);
			// 测试获取用户选择登录的角色
			// 角色id对应的角色说明在README文件中
			// console.log(localStorage.getItem('roleId'));
			// this.getProject();
			// this.getSupervisorAndAdmin();
		},
		methods: {
			callback() {},
			handleMenuClick() {},
			showDrawer() {
				// 设置只有机构管理员能够创建项目,存入localStorage里取出来的是字符串
				if (localStorage.getItem('roleId') === '46') {
					this.visible = true;
				} else {

					this.$notification.error({
						message: '无创建项目权限',
						description: `您当前登录的角色不是机构管理员，不能创建项目`
					})
				}

			},
			onClose() {
				this.$refs.ruleForm.resetFields();
				this.stepCurrent = 0;
				this.visible = false;
			},
			onSubmit() {
				console.log(this.project);
				this.$refs.ruleForm.validate(valid => {
					if (valid) {

						delete this.project.cycle; // 直接赋值的话，控制台报错太难看
						this.project.cycle = this.dateRange;
						createProject(this.project)
							.then(res => {
								if (res.code == 200) {
									this.visible = false;
									this.$notification.success({
										message: 'success',
										description: `项目创建成功`
									})
									this.getProject();
								} else {
									this.visible = false;
									this.$notification.error({
										message: 'erroe',
										description: `创建失败，服务器异常`
									})
								}
							})

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			handleClick(e) {
				console.log('click', e);
			},
			titleClick(e) {
				console.log('titleClick', e);
			},
			onSelectChange(selectedRowKeys) {
				console.log('selectedRowKeys changed: ', selectedRowKeys);
				this.selectedRowKeys = selectedRowKeys;
			},
			getProject() {
				if (localStorage.getItem('roleId') === '46') {
					projectList(this.listQurey)
						.then(res => {
							console.log(res.data.records);
							this.data = res.data.records;
							this.total = res.data.total;
						})
				} else {
					// 非机构管理员时
					const parameter = {
						id: JSON.parse(localStorage.getItem('user')).id,
						roleId: localStorage.getItem('roleId')
					};
					getProjectByRole(parameter)
						.then(res => {
							this.data = res.data;
							this.total = res.data.length;
							if (res.data.length === 0) {
								this.$notification.error({
									message: '无关联的项目',
									description: `您当前登录的角色没有关联的项目`
								})
							}
						})

				}

			},
			goNext() {
				this.stepCurrent = this.stepCurrent + 1;
			},
			goPre() {
				this.stepCurrent = this.stepCurrent - 1;
			},
			handleCancel() {
				this.previewVisible = false;
			},
			async handlePreview(file) {
				if (!file.url && !file.preview) {
					file.preview = await getBase64(file.originFileObj);
				}
				this.previewImage = file.url || file.preview;
				this.previewVisible = true;
			},
			handleChange({
				fileList
			}) {
				this.fileList = fileList;
				console.log(fileList)
				// this.ingi-project.images=[];
				// for(var i=0;i<fileList.length;i++){
				//  this.ingi-project.images.push(fileList[i].url)
				// }
			},
			multiSelectChangge(value) {
				console.log(value);
			},
			supervisorChange(value) {
				this.project.supervisor = value;
			},
			administrationChange(value) {
				this.project.administrationUser = value;
			},
			// 获取可选的项目督导和准入机构行政人员
			getSupervisorAndAdmin() {
				getSupervisor()
					.then(res => {
						this.supervisor = res.data
					});

				getAdministration()
					.then(res => {
						this.administration = res.data
					});
			},
			// 时间范围选择改变
			onChange(date, dateString) {
				// console.log(date, dateString);
				console.log(dateString) // 这里时两个时间格式化的字符串组成的数组
				this.dateRange = dateString[0] + '至' + dateString[1]
				console.log(this.dateRange)
			},
			disabledDate(current) {
				// Can not select days before today and today
				return current && current <= moment().endOf('day');
			}


		},
	};
</script>
